<template>
	<view class="real-name-page">
		
		<view class="top-info app-bac-color">
			
			<view class="avatar">
				<image v-if="appType == 1" src="../../static/images/ic-auth-user1.png"></image>
				<image v-else-if="appType == 2" src="../../static/images/ic-auth-user2.png"></image>
				<image v-else src="../../static/images/ic-auth-user.png"></image>
			</view>
			
			<view class="text1">实名认证</view>
			
			<view  class="text2">根据实名制下单要求，使用信用免押服务前您需要通过实名嗯中，并授权如下信息</view>
			
		</view>
		<view class="m-wrapper app-bac-color">
			<view class="m-item">
				
			</view>
		</view>
		
		<view class="section-box">
			<view class="set-form">
				<view class="note">
					<image src="/static/images/icon/warn.png"></image>
					<text>姓名与支付宝实名认证信息相关联且不可更改！</text>
				</view>
				
				<view class="item">
					<view class="label">真实姓名</view>
					<input type="text" v-model="real_name" class="set" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">身份证号</view>
					<input type="text" v-model="card_id" class="set" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="submit-btn app-btn-bg" @click="next">
			<view class="btn-text">立即认证</view>
		</view>
		
	<!-- 	<view class="fixed-one-btn" @click="next">
			<view class="f-btn">确定提交</view>
		</view> -->
	</view>
</template>

<script>
	let app = getApp();
	import {
		faceAttestation,
		faceInitialize,
		faceVerify,
		faceQuery
	} from '@/api/user.js';
	import {
		orderCreate,
	} from '@/api/order.js';
	export default {
		data() {
			return {
				appType: app.globalData.appType,
				real_name: '',
				card_id: '',
			}
		},
		methods: {
			next() {
				if (this.real_name == "") {
				  uni.showToast({
				    title: "请填写姓名",
				  });
				  return false
				}
				
				if (this.card_id == "") {
				  uni.showToast({
				    title: "请填写身份证号",
				  });
				  return false
				}
				
				uni.showLoading({
					title: '提交中...'
				})
				
				faceAttestation({
					real_name: this.real_name,
					card_id: this.card_id
				}).then(res=> {
					if (res.status == 200) {
						this.renlian()
					} else {
						uni.hideLoading()
					}
				})
			},
			renlian() {
				const that = this
				faceInitialize().then(initres => {
					faceVerify({
						certify_id: initres.data.certify_id,
					}).then(verifyres => {
						uni.hideLoading()
						 my.startAPVerify({
							 url: verifyres.data.result,
							 certifyId: "your_certifyId",
							 success: function (res) {
								if (res.resultStatus == "9000") {
									uni.showToast({
									  title: "认证成功",
									  duration: 2000,
									})
									faceQuery({
										certify_id: initres.data.certify_id
									}).then(faceres => {
										that.payment()
									})
									// uni.navigateBack({
									//   delta: 1
									// });
								}
							 },
							 fail: function (res) {
								console.log(res)
							 },
							 complete: function (res) {
								console.log(res)
							 }
						 })
					})
				})
			},
			payment() {
				const that = this
				const payOrderKey = uni.getStorageSync('payOrderKey')
				const payParams = uni.getStorageSync('payParams')
				orderCreate(payOrderKey, payParams).then(res => {
					if (res.status == 200) {
						uni.redirectTo({
							url: '/pages/module/order-success?order_id=' + res.data.result.orderId
						})
					}
				}).catch(err => {
					return that.$util.Tips({
						title: err
					})	
				});
			}
		}
	}
</script>

<style lang="scss">
	page { background-color: #F5F7FA; }
	
	
	.real-name-page {
		.section-box {
			padding: 24rpx;
			margin: -96rpx 24rpx 0 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			
			.s-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.s-sub {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				
				text {
					color: #FF271F;
				}
			}
		}
	
		.upload-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 316rpx;
				text-align: center;
				
				
				image {
					width: 100%;
					height: 208rpx;
				}
				
				.title {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
			}
		}
	
		.set-form {
			.note {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 64rpx;
				background: #FFF8EB;
				border-radius: 32rpx;
				
				image {
					width: 32rpx;
					height: 32rpx;
				}
				
				text {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF7029;
				}
			}
		
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 92rpx;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
					border: none;
				}
			}
		}
	
		.demand-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 150rpx;
				
				image {
					width: 150rpx;
					height: 128rpx;
				}
				
				.title {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	}
	
	.submit-btn {
		width: 702rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn-text {
		color: #fff;
		font-size: 32rpx;
	}
	
	.top-info {
		height: 720rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #5ACCBD;
		color: #fff;
		border-bottom-right-radius: 30rpx;
		
		
		.avatar {
			width: 208rpx;
			height: 208rpx;
			margin-top: 224rpx;
			
			image {
				height: 100%;
				width: 100%;
			}
		}
		
		.text1 {
			font-size: 32rpx;
			margin-top: 24rpx;
		}
		
		.text2 {
			width: 590rpx;
			margin-top: 16rpx;
			margin-top: 24rpx;
		}
	}
	
	.m-wrapper {
		width: 100%;
		height: 30rpx;
		background: #5ACCBD;
		.m-item {
			width: 100%;
			height: 30rpx;
			background: #F5F7FA;
			border-top-left-radius: 30rpx;
		}
	}
</style>